<template>
  <template v-for="(item, i) in menuItems" :key="item.Id">
    <v-list-subheader v-if="item.Type == 'subheader'">
      {{ item.Title }}
    </v-list-subheader>

    <v-list-group v-else-if="item.Children.length > 0" :value="item.Title">
      <template #activator="{ props }">
        <v-list-item v-bind="props" :title="item.Title">
          <template #prepend>
            <v-icon size="small" :icon="item.Icon"></v-icon>
          </template>
        </v-list-item>
      </template>

      <MenuRenderer :menu-items="item.Children" />
    </v-list-group>

    <v-list-item
      :to="item.To"
      v-else-if="item.Type === 'item'"
      :title="item.Title"
      :value="item.Value"
      :key="i"
      @click="handleClick(item)"
    >
      <template #prepend>
        <v-icon size="small" :icon="item.Icon"></v-icon>
      </template>
    </v-list-item>
  </template>
</template>

<script lang="ts" setup>
import type { MenuItem } from "@/types/Menu";
interface Props {
  menuItems: MenuItem[];
}
defineProps<Props>();

const handleClick = (item: MenuItem) => {
  console.log(item);
};
</script>

<style scoped>
:deep(.v-list-group__items) {
  padding-left: 8px !important;
}
:deep(.v-list-group__items .v-list-item) {
  padding-inline-start: 8px !important;
}
:deep(.v-list-group__items .v-list-group__items) {
  padding-left: 20px !important;
}
:deep(.v-list-group__items .v-list-group__items .v-list-group__items) {
  padding-left: 28px !important;
}
</style>
